<template>
	<view style="padding-bottom: 110rpx;">
		<nav-bars bgColor="#fff" fontColor="#000" title="发布评价"></nav-bars>
		<view v-for="(item, index) in GoodsList" :key="index">
			<view class="RateView">
				<view class="RateTitle" style="display: flex;align-items: flex-start;">
					<view style="width: 84rpx;height: 84rpx;border-radius: 6rpx;overflow: hidden;margin-right: 20rpx;">
						<image :src="item.main_imgurl" mode=""></image>
					</view>
					<view style="flex: 1;">
						<view class="ellipsisTextOne" style="margin-top: 6rpx;font-size: 26rpx;color: #666;">
							{{ item.product_title }}
						</view>
						<view></view>
					</view>
				</view>
				<view class="RateItem">
					<text class="RateItemText">描述相符</text>
					<u-rate size="40" active-color="#FFD425" inactive-color="#E6E6E6" inactive-icon="star-fill"
						v-model="item.value" gutter="20"></u-rate>
					<text class="RateChange">{{ valueChangeOne(item.value) }}</text>
				</view>
			</view>
			<view class="evalPublish">
				<view class="pubContent">
					<textarea value="" v-model="item.content" placeholder-class="placeStyle"
						placeholder="说说你的使用感受，为更多小伙伴购买提供参考~" />

					<view class="imgWrap">
						<view class="imgBox" v-for="(items, indexs) in item.imgList" :key="indexs"
							v-if="items.fileType=='image'">
							<view>
								<image :src="items.path" mode=""></image>
								<image style="position: absolute;top: 0;right: 0;width: 40rpx;height: 40rpx;"
									:src="`${baseImg}/static/constr/remove.png`" mode=""
									@click="removeImg(indexs, index)">
								</image>
							</view>
							<!-- <view v-if="items.fileType=='video'">
								<video id="myVideo" :src="items.path" style="width: 184rpx;height: 184rpx;"></video>
							</view> -->
						</view>
						<view class="img">
							<image :src="`${baseImg}/static/onePlusN/addImg.png`" mode="" @click="uploadImg(index,0)">
							</image>
							照片
						</view>
					</view>
					<view class="imgWrap video-box" v-if="item.type == 1">
						<view class="videoBox" v-for="(items, indexs) in item.imgList" :key="indexs"
							v-if="items.fileType=='video'">
							<!-- <image :src="item.path" mode=""></image> -->
							<video style="width: 304rpx; height: 220rpx;" :show-center-play-btn="false"
								:src="items.path" @pause="stopVideo" controls @fullscreenchange="openBig"
								play-btn-position="center"></video>
							<image style="position: absolute;top: 0;right: 0;width: 40rpx;height: 40rpx;"
								:src="`${baseImg}/static/constr/remove.png`" mode="" @click="removeImg(indexs, index)">
							</image>
						</view>
						<view class="img">
							<image :src="`${baseImg}/static/onePlusN/addImg.png`" mode="" @click="uploadImg(index,1)">
							</image>
							视频
						</view>
					</view>
					<view style="display: flex;align-items: center;font-size: 28rpx;padding: 20rpx 0;">
						上传视频：
						<u-switch size="40" @change="changeType(index)" :value="item.TypeChecked"></u-switch>
					</view>
					<view class="toselect">
						<u-checkbox-group active-color="#C3AB7C">
							<u-checkbox @change="checkboxChange(index)" :value="item.checked" shape="circle">匿名提交
							</u-checkbox>
						</u-checkbox-group>
						<span>您的用户昵称和头像将不会对外展示</span>
					</view>
				</view>
			</view>
		</view>
		<view class="btn"><button type="default" @click="gitData">发布</button></view>
	</view>
</template>
<script>
	import URL from '@/config/url.js';
	import GoodsEvaluate from '@/service/GoodsEvaluate.js';
	export default {
		name: 'add',
		components: {},
		data() {
			return {
				baseImg: 'http://manager.ryz1620.com',
				// estate_id:null,
				ordecoder: '',
				GoodsList: []
			};
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.ordecoder = options.ordecoder;
			this.getGoods();
		},
		methods: {
			getGoods() {
				var that = this;
				var params = {
					order_code: that.ordecoder
				};
				GoodsEvaluate.getGoodsDetail(params).then(res => {
					if (res.code == 1) {
						var data = res.data.list;
						// that.GoodsList = data.list
						data.forEach((item, index) => {
							item.content = '';
							item.value = '';
							item.imgList = [];
							item.imgID = [];
							item.type = 0;
							item.checked = false;
							item.TypeChecked = false;
						});
						that.GoodsList = data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			gitData() {
				var that = this;
				var GoodsList = that.GoodsList;
				var value = GoodsList.every(function(item) {
					return item.value != '';
				});
				var content = GoodsList.every(function(item) {
					return item.content != '';
				});
				if (value == false) {
					uni.showToast({
						title: '请对商品进行评分',
						icon: 'none'
					});
				} else if (content == false) {
					uni.showToast({
						title: '请输入评价内容',
						icon: 'none'
					});
				} else {
					let params = [];
					GoodsList.forEach((item, index) => {
						const id = [];
						item.imgList.map(items => {
							if (item.type == 0) {
								//图片类型
								if (items.fileType == 'image') {
									id.push(items.id);
								}
							} else {
								id.push(items.id);
							}

						});
						const obj = {
							id: item.id, //订单商品列表id
							content: item.content, //评价内容
							file: id.join(','), //评价图片/视频id(1,2)
							type: item.imgList.length == 0 && item.type == 0 ? 0 : item.type == 0 ? 1 : 2,
							is_anonymous: item.checked == false ? 0 : 1, //是否匿名(0否,1是)
							score: item.value //分数 1到5
						};
						params.push(obj);
					});
					var data = {
						order_code: that.ordecoder,
						data: JSON.stringify(params)
					};
					GoodsEvaluate.Comment(data).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '评价成功',
								icon: 'success',
								duration: 2000
							});
							this.GoodsList = [];
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				}
			},
			changeType(e) {
				var that = this;
				that.$set(that.GoodsList[e], 'TypeChecked', !that.GoodsList[e].TypeChecked);

				that.$set(that.GoodsList[e], 'type', that.GoodsList[e].type == false ? 1 : 0);
			},
			checkboxChange(index) {
				var that = this;
				that.$set(that.GoodsList[index], 'checked', !that.GoodsList[index].checked);
			},
			valueChangeOne(star) {
				let text = '';
				switch (star) {
					case 0:
						text = '';
						break;
					case 1:
						text = '很差';
						break;
					case 2:
						text = '差';
						break;
					case 3:
						text = '一般';
						break;
					case 4:
						text = '好';
						break;
					case 5:
						text = '非常好';
						break;
						// default:
				}
				return text;
			},

			//移除图片
			removeImg(indexs, index) {
				let that = this;
				var GoodsList = that.GoodsList[index];
				that.GoodsList[index].imgList.splice(indexs, 1);
			},
			uploadImg(index, type) {
				let that = this;
				var GoodsList = that.GoodsList[index];
				if (type == 0) {
					var len = 0;
					var newArr = GoodsList.imgList.forEach(function(item, idnex) {
						if (item.fileType != 'video') {
							return len += 1;
						}
					})
					if (len >= 9) {
						uni.showToast({
							title: '图片数量最多只能9张',
							icon: 'none',
						});
						return;
					}
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: URL.ENTER_UPLOAD_IMAGE,
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									user: 'test'
								},
								success: uploadFileRes => {
									uni.showLoading({
										title: '上传中'
									});
									let data = JSON.parse(uploadFileRes.data);
									if (data.code == 1) {
										that.GoodsList[index].imgList.push({
											path: data.data.url,
											id: data.data.id,
											fileType: 'image',
										});
										uni.showToast({
											title: '上传成功',
											icon: 'success'
										});
									} else {
										uni.showToast({
											title: data.msg,
											icon: 'none'
										});
									}
									setTimeout(function() {
										uni.hideLoading();
									}, 500);
								}
							});
						}
					});

				} else {
					var len = 0;
					var newArr = GoodsList.imgList.forEach(function(item, idnex) {
						if (item.fileType == 'video') {
							return len += 1;
						}
					})
					if (len >= 1) {
						uni.showToast({
							title: '只能选择上传一个视频',
							icon: 'none',
						});
						return;
					}
					uni.chooseVideo({
						count: 1,
						sourceType: ['camera', 'album'],
						success: res => {
							const tempFilePaths = res.tempFilePath;
							uni.uploadFile({
								url: URL.ENTER_UPLOAD_IMAGE,
								filePath: tempFilePaths,
								name: 'file',
								success: uploadFileRes => {
									uni.showLoading({
										title: '上传中'
									});
									let data = JSON.parse(uploadFileRes.data);
									if (data.code == 1) {
										let obj = {
											path: data.data.url,
											id: data.data.id,
											fileType: 'video',
										};
										that.GoodsList[index].imgList.push(obj);
										uni.showToast({
											title: '上传成功',
											icon: 'success'
										});
									} else {
										uni.showToast({
											title: data.msg,
											icon: 'none'
										});
									}
									setTimeout(function() {
										uni.hideLoading();
									}, 500);
								}
							});
						}
					});
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.ellipsisTextOne {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.RateView {
		margin: 32rpx 32rpx 0 32rpx;
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 28rpx;

		.RateTitle {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.RateText {
				font-size: 28rpx;
				font-weight: 600;
				color: #0a0605;
				margin-right: 10rpx;
			}
		}

		.RateItem {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;

			.RateChange {
				margin-left: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffce0d;
			}

			.RateItemText {
				font-size: 28rpx;
				font-weight: 400;
				color: #0a0605;
				margin-right: 20rpx;
			}
		}
	}

	.evalPublish {
		// border-radius: 16rpx;
		// padding-bottom: 10rpx;

		.pubContent {
			// width: 702rpx;
			// height: 606rpx;
			background-color: #fff;
			margin: 0 32rpx;
			padding: 0rpx 28rpx 40rpx 28rpx;
			border-radius: 0 0 16rpx 16rpx;

			textarea {
				width: 100%;
			}

			.placeStyle {
				font: 400 26rpx/40rpx PingFang SC;
				color: #a0a0a0;
			}

			.video-box {
				margin-top: 20rpx;
			}

			.imgWrap {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.imgBox {
					width: 164rpx;
					height: 164rpx;
					display: flex;
					border-radius: 4rpx;
					margin: 5rpx;
					position: relative;

					image {
						width: 164rpx;
						height: 164rpx;
						border-radius: 4rpx;
					}
				}

				.videoBox {
					width: 304rpx;
					height: 220rpx;
					display: flex;
					border-radius: 4rpx;
					margin-right: 5rpx;
					position: relative;

					image {
						width: 164rpx;
						height: 164rpx;
						border-radius: 4rpx;
					}

				}

				.img {
					width: 164rpx;
					height: 164rpx;
					border-radius: 4rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-color: #f6f7fb;
					font: 400 18rpx/20rpx;
					color: #a0a0a0;

					image {
						width: 56rpx;
						height: 56rpx;
						border-radius: 4rpx;
					}
				}
			}

			.toselect {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;
				font: 400 26rpx/40rpx PingFang SC;
				color: #505050;

				span {
					font: 400 24rpx/36rpx PingFang SC;
					color: #a0a0a0;
				}
			}
		}
	}

	// 发表按钮
	.btn {
		width: 100%;
		height: 108rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		height: calc(108rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(108rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		z-index: 999;

		button {
			width: 520rpx;
			height: 88rpx;
			margin: 10rpx auto;
			background-color: #c3ab7c;
			border-radius: 44rpx;
			font: 600 32rpx/88rpx PingFang SC;
			color: #fff;
		}
	}
</style>
